<template>
    <div>
      <p style = "font-size:25px;">计数器: {{ counter }}</p>
      <button @click = "counter++" style = "font-size:25px;">点我改变计数器</button>
      <button @click= "changeProducts()" style = "font-size:25px;">我们尝试更改在product 中新增一个新的属性 该方法并不推荐</button>
      <button @click= "deleteProductsPro()" style = "font-size:25px;">我们尝试删除product中的一个属性</button>
      <button @click= "setProductsPro()" style = "font-size:25px;">使用Vue set 方法新增一个属性</button>
      <p style="font-size:25px;">{{products.name}}</p>
      <p style="font-size:25px;">{{products.qty}}</p>
      <p style="font-size:25px;">{{productsTwo.pro}}</p>
    </div>
</template>
<script>
/*
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。

Vue 不能检测到对象属性的添加或删除，最好的方式就是在初始化实例前声明根级响应式属性，哪怕只是一个空值。

如果我们需要在运行过程中实现属性的添加或删除，则可以使用全局 Vue，Vue.set 和 Vue.delete 方法。
*/
var myProduct = {'id':10, 'name':'myBook', 'price':'30.00'};
export default {
  name: 'reactiveInterface',
  data () {
    return {
      title: '响应式接口',
      counter: 1,
      products: {
        'id': 1,
        name: 'book',
        'price': '20.0'
      },
      productsTwo: myProduct
    }
  },
  methods: {
    timeChangeCounter: function () {
      setTimeout(() => {
        alert(this.counter)
        this.counter += 20
      }, 10000)
    },
    changeProducts: function () {
      this.products.qty = '1'
      this.products.name = 'DeLongYang'
      alert(this.products.qty)
      alert(this.products.name)
      console.log(this) // 我们通过这个log可以打印出 js中对象的属性和方法 里面的setter getter 方法是动态绑定的关键虽然及时不加入也显示出来但并不是一定显示的
    },
    deleteProductsPro: function () {
      Vue.delete(myProduct, 'price')
      console.log(this) // 我们通过这个log可以打印出 js中对象的属性和方法
    },
    setProductsPro: function () {
      Vue.set(myProduct, 'pro', 30)
      console.log(this)
    }
  },
  watch: {
    counter: function (nval, oval){
      alert('counter change from oval: ' + oval + 'to new value: ' + nval)
    }
  },
  mounted () {
    // alert('mounted')
    // this.timeChangeCounter()
  },
  activated () {
    alert('子组件里面 不会触发 actived')
  }
}
</script>
<style>
/* .reactiveInterfaceHome{
    margin-top: 10%;
    font-size: 2.4em;
    font-weight: bold;
} */
</style>
